<template>
  <section class="page-container">
    <section class="search-form">
      <lf-form
        :model-keys.sync="searchParams"
        :model="searchParams"
        label-width="100px"
        :form-items="formList"
      />
    </section>

    <section class="options-wrap">
      <el-button
        type="primary"
        @click="doEditHandle()"
      >
        添加
      </el-button>
    </section>

    <lf-table
      v-loading="loading"
      :data="tableData"
      :columns="columns"
    />

    <lf-pagination
      :total="total"
      :page-num="searchParams.pageNum"
      @size-change="sizeChange"
      @current-change="currentChange"
    />

    <edit-rules
      :visible.sync="showEditDialog"
      :is-edit="isEdit"
      :params="editParams"
    />
  </section>
</template>

<script>
  import { getTableListData } from '@/api/modules/table';
  import EditRules from '../components/EditRules';

  export default {
    name: 'table-list',
    components: {
      EditRules,
    },
    data() {
      return {
        loading: false,
        searchParams: {
          pageNum: 1,
          pageSize: 10,
          ruleName: '',
          describe: '',
        },
        // 表单内容
        formList: [
          {
            _type: 'input',
            _model: 'ruleName',
            label: '规则名称:',
            prop: 'ruleName',
            placeholder: '请输入规则名称',
            clearable: true,
          },
          {
            _type: 'input',
            _model: 'describe',
            label: '描述:',
            prop: 'describe',
            placeholder: '请输入描述',
            clearable: true,
          },
          {
            fixed: true,
            render: () => (
              <el-button type="primary" onClick={
                () => {
                  this.doSearchHandle(true);
                }
              }>查询</el-button>
            ),
          }
        ],
        tableData: [],
        total: 0,
        columns: [
          {
            prop: 'ruleName',
            label: '规则名称',
          },
          {
            prop: 'describe',
            label: '描述',
          },
          {
            prop: 'frequency',
            label: '服务调用次数',
          },
          {
            prop: 'status',
            label: '状态',
            formatter: (row) => (row?.status === 1 ? '开启' : '关闭'),
          },
          {
            prop: 'useTime',
            label: '上次调用时间',
            formatter: (row) => this.$dateUtils.parseTime(row?.useTime || '', '{y}-{m}-{d}'),
          },
          {
            prop: 'options',
            label: '操作',
            width: 120,
            render: (params) => (
              <div>
                <el-button
                  size="mini"
                  type="text"
                  onClick = {
                    () => {
                      this.doEditHandle(params.row);
                    }
                  }>
                  配置
                </el-button>

                <el-button
                  size="mini"
                  type="text"
                  onClick = {
                    () => {
                      this.$message.success('订阅报警');
                    }
                  }>
                  订阅报警
                </el-button>
              </div>
            ),
          }
        ],

        showEditDialog: false,
        isEdit: false,
        editParams: {},
      };
    },
    mounted() {
      this.doSearchHandle(true);
    },
    methods: {
      doSearchHandle(firstPage) {
        if (firstPage) { this.searchParams.pageNum = 1; }
        this.loading = true;
        getTableListData({ ...this.searchParams }).then(({ result, total }) => {
          this.loading = false;
          this.tableData = result || [];
          this.total = total || 0;
        }).catch(() => {
          this.loading = false;
        });
      },
      currentChange(val) {
        this.searchParams.pageNum = val;
        this.doSearchHandle(false);
      },
      sizeChange(val) {
        this.searchParams.pageSize = val;
        this.doSearchHandle(true);
      },
      doEditHandle(params) {
        this.showEditDialog = true;
        this.isEdit = !!(params && Object.keys(params).length);
        this.editParams = params || {};
      },
    },
  };
</script>
<style lang="scss" scoped>
.options-wrap {
  padding: 10px 0;
  text-align: right;
}
</style>
